<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
body {background:url(page_bg.png);}
img{ border:none; float:right}
*{ margin:0; padding:0; font-size:14px; color:#333}
    
.b{
    border-bottom-left-radius:3px;
    border-bottom-right-radius:3px;
    border-top-left-radius:3px;
    border-top-right-radius:3px;
    border-width:1px;
    border-style:solid;
    border-top-color:#dcdcdc;
    border-right-color:#dcdcdc;
    border-bottom-color:#dcdcdc;
    border-left-color:#dcdcdc;
    margin:5px auto 0;
    background-color:white;
    width:302px;
}

.b span {
    margin-right:5px;
}
    
ul li{
	border-bottom:1px #ddd solid;
	list-style:none;
    padding:5px;
}

font {
	color:red;
}

input {
	width:15px;
	height:15px;
    margin-right:10px;
}

.area {
    width:200px;
    height:40px;
    margin-left:10px;
    color:gray;
}

label, img {
    margin:10px 0;
}

.fl{ float:left}
.fr{ float:right}

.clearfix:after {clear:both; content:'';display: block;font-size: 0;line-height: 0;visibility: hidden; width: 0;height: 0;}
.clearfix {+display: inline-block;}
* html .clearfix {height: 1%;} 

</style>

<script>
//某个区域被点击后，如果是选中，就显示"xx整个地区"，如果是取消，就什么都不显示
function area_onclick(obj) {
    var name = document.getElementById(obj.id + "_name");
    var tip = document.getElementById(obj.id + "_tip");
    
    if (obj.checked == true) {
        tip.innerHTML = name.innerHTML + "整个地区";
        tip.style.lineHeight = "40px";
    }
    else {
        tip.innerHTML = "";
    }
}

//显示某个区域，被选中的省份信息
//如果province_string=all，这个区域就被选中，并显示"xx整个地区"
//如果province_string=""，这个区域就不被选中，并什么都不显示
//如果province_string不为前两个状态，就不被选中，并显示这个值的信息
function provinces_selected(id, data) {
    var obj = document.getElementById(id);
    var name = document.getElementById(obj.id + "_name");
    var tip = document.getElementById(obj.id + "_tip");
    tip.innerHTML = "";
    
    if (data == "all") {
        obj.checked = true;
        tip.innerHTML = name.innerHTML + "整个地区";
        tip.style.lineHeight = "40px";
    }
    else if (data == "") {
        obj.checked = false;
        tip.innerHTML = "";
    }
    else {
        obj.checked = false;
        var provinces = data.province.split(',');
        var counts = data.cityNum.split(',');
        
        if (provinces.length < 4) {
            tip.style.lineHeight = "40px";
        }
        else {
            tip.style.lineHeight = "";
        }
        
        for (var i = 0; i < provinces.length; i++) {
            tip.innerHTML += provinces[i] + "(<font>"+ counts[i] +"</font>) ";
        }
    }
}

//得到某一个id的选中状态
function check_status(id) {
    var obj = document.getElementById(id);
    
    return obj.checked;
}

    
var areas = {'华东':'area_east', '华北':'area_north', '华中':'area_center', '华南':'area_south', '东北':'area_northeast', '西北':'area_northwest', '西南':'area_southwest', '港澳台':'area_gwt', '海外':'area_foreign'};
function show(json) {
    var area_id = areas[json.area];
    
    this.provinces_selected(area_id, json.info);
}

//返回某一个区域选中的省，返回JSON格式
function select_result(area_name) {
    var area_id = areas[area_name];
    var province_string = document.getElementById(area_id + "_tip").innerHTML;

    var result = "";
    if (province_string.substring(province_string.length - 4) == "整个地区") {
        
        result = "all";
    }
    else if (province_string == "") {
        
        result = "";
    }
    else {
        var numbers = new Array();
        var names = new Array();
        
        //用空格切开后，就是省+数字的形式
        var tag_array = province_string.substring(0, province_string.length - 1).split(" ");
        for (var i = 0; i < tag_array.length; i++) {
            //用(<font>切开，可以得到省名和半成品的数量
            var temp = tag_array[i].split("(<font>");
            names[i] = temp[0];
            
            //数量半成品去掉后面的</font>)就剩下数字
            numbers[i] = temp[1].replace("</font>)", "");
        }
        
        result = "{'area' : '"+ area_name +"', 'info' : {'cityNum' : '"+ numbers.join(',') +"', 'province' : '"+ names.join(',') +"'}}";
    }
    
    return result;
}
</script>
</head>

<body>
    <div id="param"></div>
	<div class="b">
    	<ul>
    		<li style="text-align:center" class="c">选择一个大区就包含所有省份及城市</li>
            
            <li class="clearfix">
                <label class="fl"><input type='checkbox' id='area_east' onClick="area_onclick(this);"><span id="area_east_name">华东</span></label>
                <div id="area_east_tip" class="area fl" onClick="javascript:location.href='open:select_province?华东';">
                </div>
                <img src="arrow-r.png" class="fr">
            </li>
            
            <li class="clearfix">
            	<label class="fl"><input type='checkbox' onClick="area_onclick(this);" id='area_north'><span id="area_north_name">华北</span></label>
            	<div id="area_north_tip" class="area fl" onClick="javascript:location.href='open:select_province?华北';">
            	</div>
            	<img src="arrow-r.png">
            </li>
            <li class="clearfix">
            	<label class="fl"><input type='checkbox' onClick="area_onclick(this);" id='area_center'><span id="area_center_name">华中</span></label>
            	<div id="area_center_tip" class="area fl" onClick="javascript:location.href='open:select_province?华中';">
            	</div>
            	<img src="arrow-r.png">
            </li>
            <li class="clearfix">
            	<label class="fl"><input type='checkbox' onClick="area_onclick(this);" id='area_south'><span id="area_south_name">华南</span></label>
            	<div id="area_south_tip" class="area fl" onClick="javascript:location.href='open:select_province?华南';">
            	</div>
            	<img src="arrow-r.png">
            </li>
            <li class="clearfix">
            	<label class="fl"><input type='checkbox' onClick="area_onclick(this);" id='area_northeast'><span id="area_northeast_name">东北</span></label>
            	<div id="area_northeast_tip" class="area fl" onClick="javascript:location.href='open:select_province?东北';">
            	</div>
            	<img src="arrow-r.png">
            </li>
            <li class="clearfix">
            	<label class="fl"><input type='checkbox' onClick="area_onclick(this);" id='area_northwest'><span id="area_northwest_name">西北</span></label>
            	<div id="area_northwest_tip" class="area fl" onClick="javascript:location.href='open:select_province?西北';">
            	</div>
            	<img src="arrow-r.png">
            </li>
            <li class="clearfix">
            	<label class="fl"><input type='checkbox' onClick="area_onclick(this);" id='area_southwest'><span id="area_southwest_name">西南</span></label>
            	<div id="area_southwest_tip" class="area fl" onClick="javascript:location.href='open:select_province?西南';">
            	</div>
            	<img src="arrow-r.png">
            </li>
            <li class="clearfix">
            	<label class="fl"><input type='checkbox' onClick="area_onclick(this);" id='area_gwt'><span id="area_gwt_name">港澳台</span></label>
            	<div id="area_gwt_tip" class="area fl" onClick="javascript:location.href='open:select_province?港澳台';">
            	</div>
            	<img src="arrow-r.png">
            </li>
            <li class="clearfix">
            	<label class="fl"><input type='checkbox' onClick="area_onclick(this);" id='area_foreign'><span id="area_foreign_name">海外</span></label>
                <div id="area_foreign_tip" class="area fl" onClick="javascript:location.href='open:select_province?海外';">
            	</div>
            </li>
        </ul>
    </div>
    <div style='margin-bottom:20px'></div>
<script>show()</script>
</body>
</html>
